<style lang="scss">
.search-box {
	width: 85%;
	height: 30px;
	background-color: rgba(255,255,255,0.5);
	border-radius: 15px;
	margin: 0 auto;
	padding: 0 1rem;
	font-size: 1.5rem;
	color: #B8B8B8;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

<template>
	<div class="search-box" @click="gotoSearchPage()">
		{{keyWord}}&nbsp;
		<v-icon type="search"></v-icon>
	</div>
</template>

<script>
export default{
	name: "searchBox",
	props: {
      keyWord: {
        type: String,
        default: "搜索商品类别或粘贴宝贝名称"
      }
    },
	methods: {
		gotoSearchPage: function(){
			this.$router.push({path: 'search-page'})
		}
	}
}
</script>